<template>
  <div  class="out">
    <div v-for="(item,index) in attributeOrder" :key="index" class="inner">
         <div class="font">{{item.show}}</div>
        <div class="inp"><el-input size="mini" v-model="newData[item.attr]" placeholder=""></el-input></div>
    </div>
    <!-- <div class="innerbtn">
         <el-button type="primary" size="mini" @click="searchCondition">搜索</el-button>
    </div> -->
  </div>
</template>
<script>
export default {
    props:["attributeOrder"],
    data(){
        return{
            //深拷贝的searchData
            newData:[]
        }
    },
    created(){
        //this.newData=JSON.parse(JSON.stringify(this.searchData))//深拷贝
    },
    watch:{
        newData:{
            handler(newValue,oldValue){
                this.$emit("searchCallBack",this.newData)
            },
            deep:true,
        }
    },
    // methods:{
    //     searchCondition(){//返回数据给父组件查询
    //         this.$emit("searchCallBack",this.newData)
    //     }
    // }
};
</script>
<style lang="scss" scoped>
.out{
    display: inline-block;
    width: 200px;
    // display: flex;
    flex-wrap: wrap;
    // width: 100%;
    // padding: 20px 10px;
    .inner{
        // width: 25%;
        display: flex;
        //padding: 0px 15px;
        .font{
            width: 70px;
            // background: forestgreen;
        }
        .inp{
            flex: 100;
            // background: yellowgreen;
        }
    }
    .innerbtn{
        width: 25%;
        padding: 7.5px 20px; 
    }
}
</style>
